import { withI18n, Trans } from '@lingui/react'
//import { Form } from 'antd'
import React, { Fragment, PureComponent } from 'react'
import PropTypes from 'prop-types'
import { DescriptionList } from 'ant-design-pro'
import { Page } from 'components'
import { Spin, Empty, Radio, Typography, DatePicker, Button, Icon } from 'antd'
import ReactEcharts from 'echarts-for-react'
import echarts from 'echarts'
import 'echarts-gl'
import styles from '../index.less'
import moment from 'moment'
const { MonthPicker, RangePicker, WeekPicker } = DatePicker
const { Paragraph } = Typography
const { Description } = DescriptionList
import { connect } from 'dva'

const datetoday = moment().format('YYYY-MM-DD')

@withI18n()
class Current extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      whichone: 'v',
    }
  }
  echarts_react = undefined
  getoption(realtime) {
    const { i18n } = this.props
    const { whichone } = this.state
    const pref = {
      v: i18n.t`Voltage`,
      e: i18n.t`Electric Current`,
      p: i18n.t`Power`,
      tp: i18n.t`Plate Temperature`,
      pv_v: i18n.t`Solar charging Voltage`,
      led_v: i18n.t`Lamp Voltage`,
    }
    const preffix = pref[whichone]
    let min, max
    if ((realtime.max == 0) | (realtime.min == 0)) {
      min = moment()
        .subtract(1, 'day')
        .valueOf()
      max = moment().valueOf()
    } else {
      min = realtime.min - 60 * 60 * 1000
      max = realtime.max
    }
    return {
      animation: true,
      tooltip: {
        trigger: 'axis',
        formatter: (params, ticket, callback) => {
          const { data, dataIndex, value } = params[0]
          return `${preffix} : ${value[1]}<br/>${i18n.t`Time`} : ${moment(
            value[0]
          ).format('MM-DD HH:mm:ss:SSS')}`
        },
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      // dataZoom: {
      //   show: true,
      //   realtime: true,
      //   start: 30,
      //   end: 70,
      //   xAxisIndex: [0],
      // },
      xAxis: {
        type: 'time',
        boundaryGap: false,
        min,
        max,
      },
      yAxis: {
        name: preffix,
        type: 'value',
      },
      series: [
        {
          name: preffix,
          type: 'line',
          stack: '总量',
          data: realtime[whichone],
        },
      ],
    }
  }

  ismultidataaccess = () => {
    const { realtime } = this.props
    const targdata = realtime && realtime[this.state.whichone]
    return targdata && targdata.length > 0
  }
  componentDidMount() {
    const { SetonReceiveReport } = this.props
    if (SetonReceiveReport)
      SetonReceiveReport(payload => {
        let item = JSON.parse(payload)
        const {
          Imei,
          ChargeToday,
          OutPutToday,
          Voltage,
          Electricity,
          Power,
          Pv_Voltage,
          Led_Voltage,
          Temperature,
          Signal,
          Location,
          TimeToken,
        } = item
        const { realtime, updaterealtimedata } = this.props
        realtime.v.push([TimeToken, Voltage])
        realtime.e.push([TimeToken, Electricity])
        realtime.p.push([TimeToken, Power])
        realtime.pv_v.push([TimeToken, Pv_Voltage])
        realtime.led_v.push([TimeToken, Led_Voltage])
        realtime.tp.push([TimeToken, Temperature])
        realtime.max = TimeToken
        //
        updaterealtimedata(realtime)
        //
        if (this.echarts_react) {
          // let echarts_instance = this.echarts_react.getEchartsInstance();
          // echarts_instance.setOption({
          //   ...this.getoption(realtime),
          // })
        }
      })
  }

  componentWillUnmount() {
    //通知退订该设备
    console.log('current Unmount')
  }

  componentWillReceiveProps(nextprops) {
    const { realtime } = nextprops
    if (this.ismultidataaccess() && this.echarts_react) {
      // let echarts_instance = this.echarts_react.getEchartsInstance()
      // echarts_instance.setOption({
      //   ...this.getoption(realtime),
      // })
    }
  }

  render() {
    const {
      i18n,
      data,
      deviceid,
      Imei,
      getrealtimedata,
      updaterealtimedata,
      SetonReceiveReport,
      realtime,
      loading,
    } = this.props
    const { whichone } = this.state
    // console.log(JSON.stringify(laterdata))
    return (
      <Page inner>
        <DescriptionList
          size="large"
          title={
            <span>
              <b>
                <Trans>Reporting data in the past 24 hours</Trans>
              </b>
              &nbsp;&nbsp;
              <span style={{ fontSize: '13px' }}>
                (&nbsp;
                <Icon type="sync" style={{ fontSize: '10px' }} />
                &nbsp;<Trans>Real-time update</Trans>&nbsp;)
              </span>
            </span>
          }
        >
          <Spin spinning={loading}>
            <Radio.Group
              value={whichone}
              onChange={e => {
                this.setState({ whichone: e.target.value })
              }}
              style={{
                marginLeft: '10px',
                marginRight: '10px',
                marginBottom: '10px',
              }}
            >
              <Radio.Button value="v">
                <Trans>Voltage</Trans>
              </Radio.Button>
              <Radio.Button value="e">
                <Trans>Electric Current</Trans>
              </Radio.Button>
              <Radio.Button value="p">
                <Trans>Power</Trans>
              </Radio.Button>
              <Radio.Button value="tp">
                <Trans>Plate Temperature</Trans>
              </Radio.Button>
              <Radio.Button value="pv_v">
                <Trans>Solar charging Voltage</Trans>
              </Radio.Button>
              <Radio.Button value="led_v">
                <Trans>Lamp Voltage</Trans>
              </Radio.Button>
            </Radio.Group>
            <div>
              {this.ismultidataaccess() ? (
                <div>
                  <ReactEcharts
                    ref={e => {
                      this.echarts_react = e
                    }}
                    option={this.getoption(realtime)}
                    style={{ minHeight: '700px', width: '100%' }}
                  />
                </div>
              ) : (
                <Empty style={{ marginTop: '20px' }} />
              )}
            </div>
          </Spin>
        </DescriptionList>
      </Page>
    )
  }
}

Current.propTypes = {
  onAdd: PropTypes.func,
  //form: PropTypes.object,
  filter: PropTypes.object,
  onFilterChange: PropTypes.func,
}

export default Current
